﻿<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/share/_meta.jsp" %>
<%@ include file="/share/_footer.jsp" %>
<style type="text/css">
	.table>tbody>tr>td{
		text-align:center;
	}
</style>
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span>系统管理中心 <span class="c-gray en">&gt;</span> 账单管理
	<a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a>
</nav>
<div class="page-container">
	<form id="myform" method="post">
	<div class="codeView docs-example">
		<div>
		<input id = "code" type="text" placeholder="账单编号" class="input-text radius size-L" style="width:250px" name="id">
		<input id = "ownerName" type="text" placeholder="业主名" class="input-text radius size-L" style="width:250px" name="id">		
		<div class="form-group">
			<select class="form-control shift-info" style="width:250px" name="costType" id = "costType">
				<option value=''>所有费用类型</option>
				<c:forEach items="${costList}" var="item">
					<option value="${item.id}" <c:if test="${query.costType==item.id }">selected</c:if>>${item.name}</option>
				</c:forEach>
			</select>
		</div>
		<div class="form-group">
			<select class="form-control shift-info" style="width:250px" name="paystatus" id="paystatus">
				<option value=''>付款状态</option>
				<option value="0" <c:if test="${query.paystatus == false }">selected</c:if>>未付款</option>
				<option value="1" <c:if test="${query.paystatus == true }">selected</c:if>>已付款</option>
			</select>
		</div>
		<div class="form-group">
			<select class="form-control shift-info" style="width:250px" name="status" id="status">
				<option value=''>同步状态</option>
				<option value="0" <c:if test="${query.status == false }">selected</c:if>>未同步</option>
				<option value="1" <c:if test="${query.status == true }">selected</c:if>>已同步</option>
			</select>
		</div>
		<div class="form-group">
			<select class="form-control" style="width:250px" name="housingId" id="housingId">
				<option value='' disabled selected style='display:none;'>所有小区</option>
				<c:forEach items="${parentList}" var="item">
					<option value="${item.id}" <c:if test="${query.housingId==item.id }">selected</c:if>>${item.name}</option>
				</c:forEach>
			</select>
		</div>
		<div class="form-group">
			<select class="form-control" name="building" style="width:250px" id="building">
				<option value='' disabled selected style='display:none;'>所有楼栋</option>
			    <!-- <option></option> -->
			</select>
		</div>
		<div class="form-group">
			<select class="form-control" name="unit" style="width:250px" id="unit">
				<option value='' disabled selected style='display:none;'>所有单元</option>
			    <!-- <option></option> -->
			</select>
		</div>
		<div class="form-group">
			<select class="form-control" name="room" style="width:250px" id="room">
				<option value='' disabled selected style='display:none;'>所有房间号</option>
			    <!-- <option></option> -->
			</select>
		</div>
		<div class="form-group">		
		     <input type="text" placeholder="开始时间" class="input-text radius size-L" name="startTime" style="width:250px" id="startTime" >
		     <input type="text" placeholder="结束时间" class="input-text radius size-L" name="endTime" style="width:250px" id="endTime" >
		</div>
		</div>		
		<%--<div class="form-group" id="roomdoc">--%>
			<%--<select class="form-control shift-info" style="width:250px" name="roominfoId" id="roominfoId">--%>
				<%--<option value=''>所有房间</option>--%>
			<%--</select>--%>
		<%--</div>--%>
		<div class="form-group mt-20">
		<button type="button" class="btn btn-secondary radius size-L" onclick="query()">查&nbsp;询</button>
		<button type="button" class="btn btn-secondary radius size-L" onclick="info_add();">新&nbsp;增</button>
		<button type="button" class="btn btn-secondary radius size-L" onclick="bill_list_del();">批量删除</button>
		<button type="button" class="btn btn-secondary radius size-L" onclick="bill_list_sync();">批量同步</button>
		<button type="button" class="btn btn-warning radius size-L" onclick="excel_upload();">导入账单</button>
		<button type="button" class="btn btn-warning radius size-L" onclick="excel_download();">下载模板</button>
		<button type="button" class="btn btn-secondary radius size-L" onclick="bill_allreceiv();">一键收款</button>
		<button type="button" class="btn btn-secondary radius size-L" onclick="downloadBillAccountList();">导出账单</button>
		</div>
	</div>

	<div class="panel panel-default mt-20">
		<div class="panel-header">
			数据列表
			<b style="margin-left: 60px;">总金额: <a style="text-underline: none" id="totalFee"></a></b>
		</div>
		<div class="panel-body">
			<table class="table table-border table-bordered table-bg table-hover table-sort table-striped">
				<thead>
				<tr class="text-c">
					<th width="25"><input type="checkbox" name="" value=""></th>
					<th>小区名称</th>
					<th>完整门牌</th>
					<th>账单编号</th>
					<th>业主名</th>
					<%--<th>手机号</th>--%>
					<%--<th>身份证号</th>--%>
					<th>费用类型</th>
					<th>账期</th>
					<th>应收金额</th>
					<th>付款类型</th>
					<th>付款状态</th>
					<th>支付宝付款编号</th>
					<th>微信付款编号</th>
					<th>付款时间</th>
					<th>创建时间</th>
					<th>同步状态</th>
					<th>打印状态</th>
					<th>备注</th>
					<th width="100px">操作</th>
				</tr>
				</thead>
				<tbody>
				</tbody>
			</table>
			<br>
			<br>
		</div>
	</div>
	</form>
</div>

<script type="text/javascript" src="${pageContext.request.contextPath}/h-ui/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/h-ui/common/laydate.js"></script>
<script type="text/javascript">

	$(function(){
		laydate.render({
	        elem: '#startTime' //指定元素
	        ,format: 'yyyy-MM-dd'
	    });
	    laydate.render({
	        elem: '#endTime' //指定元素
	        ,format: 'yyyy-MM-dd'
	    });
		queryList();
	})

	function queryList(){
		$(".table-sort").dataTable().fnDestroy();
        //$(".table-sort").dataTable().fnDraw(false);
        $(".table-sort").DataTable({
			bStateSave: false,
			aoColumnDefs: [{bSortable: false}],
			pageLength: 10,
            //aLengthMenu: [[10, 25, 50, -1]],
			searching: false,
			bFilter: true,
			bSort:false,
			bStateSave: false,
			aLengthMenu:[[10, 25, 50, 100], ["10条", "25条", "50条", "100条"]],
			serverSide:true,//实现后台分页
			lengthChange: true,
			bPaginate: true,
			ajax: {
				url: "${pageContext.request.contextPath}/rest/billAccount/tableBillAccountList",
				dataSrc: "data",
				data: function ( d ) {
					d.id = $("#code").val();
					d.ownerName = $("#ownerName").val();
					d.startTime = $("#startTime").val();
					d.endTime = $("#endTime").val();
					d.housingId = $("#housingId option:selected").val();
					/* d.roominfoId = $("#roominfoId option:selected").val(); */
					d.costType = $("#costType option:selected").val();
					d.paystatus = $("#paystatus option:selected").val();
					d.status = $("#status option:selected").val();
					d.building = $("#building option:selected").val();
					d.unit = $("#unit option:selected").val();
					d.room = $("#room option:selected").val();
				}
			},
			/*fnDrawCallback: function () {
			 var api = this.api();
			 api.column(0).nodes().each(function (cell, i) {
			 cell.innerHTML = i + 1;
			 });
			 },*/
			aoColumns: [//列绑定
				{"data": "id"},
				{"data": "housingName"},
				{"data": "roominfoAddress"},
				{"data": "id"},
				{"data": "ownerName"},
				{"data": "costTypeName"},
				{"data": "acctPeriod"},
				{"data": "billEntryAmount"},
				{"data": "paytype"},
				{"data": "paystatus"},
				{"data": "alipayTradeNo"},
                {"data": "weixinTradeNo"},
				{"data": "paydate"},
				{"data": "createTime"},
				{"data": "status"},
				{"data": "printstatus"},
                {"data": "remark"}
			],
			aoColumnDefs: [//列定义
				/*{
				 "aTargets": [0],
				 "mData": "id",
				 "mRender": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
				 return "";
				 }
				 },*/{
					"aTargets": [0],
					"mData": "id",
					"mRender": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
						return "<input type='checkbox' name='ids' value="+data+">";
					}
				}, {
					"aTargets": [1],
					"mData": "housingName",
					"mRender": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
						return data;
					}
				}, {
					"aTargets": [2],
					"mData": "roominfoAddress",
					"mRender": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
						return data;
					}
				}, {
					"aTargets": [3],
					"mData": "id",
					"mRender": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
						return data;
					}
				}, {
					"aTargets": [4],
					"mData": "ownerName",
					"mRender": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
						return data;
					}
				}, {
					"aTargets": [5],
					"mData": "costTypeName",
					"mRender": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
						return data;
					}
				}, {
					"aTargets": [6],
					"mData": "acctPeriod",
					"mRender": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
						return data;
					}
				}, {
					"aTargets": [7],
					"mData": "billEntryAmount",
					"mRender": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
						return data;
					}
				}, {
					"aTargets": [8],
					"mData": "paytype",
					"mRender": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
						if(data==1){
							return "现金";
						}else if(data==2){
							return "支付宝";
						}else if(data==3){
							return "微信";
						}else if(data==4){
							return "POS机";
						}else if(data==5){
							return "银行转帐";
						}else if(data==6){
							return "抵用券";
						}else if(data==99){
							return "其他";
						}else {
							return "";
						}
					}
				}, {
					"aTargets": [9],
					"mData": "paystatus",
					"mRender": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
						if(data==true){
							return "已付款";
						}else if(data==false){
							return "未付款";
						}else {
							return "";
						}
					}
				}, {
					"aTargets": [10],
					"mData": "alipayTradeNo",
					"mRender": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
						return data;
					}
				}, {
                    "aTargets": [11],
                    "mData": "weixinTradeNo",
                    "mRender": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
                        return data;
                    }
                }, {
					"aTargets": [12],
					"mData": "paydate",
					"mRender": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
						return data;
					}
				}, {
					"aTargets": [13],
					"mData": "createTime",
					"mRender": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
						return data;
					}
				}, {
					"aTargets": [14],
					"mData": "status",
					"mRender": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
						if(data==true){
							return "已同步";
						}else if(data==false){
							return "未同步";
						}else {
							return "";
						}
					}
				}, {
					"aTargets": [15],
					"mData": "printstatus",
					"mRender": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
						console.log(full);
						if(full.accountSum!=null){
						    $("#totalFee").html(full.accountSum);
						}else {
                            $("#totalFee").html(0);
						}
						if(data==true){
							return "已打印";
						}else if(data==false){
							return "未打印";
						}else {
							return "";
						}
					}
				}, {
                    "aTargets": [16],
                    "mData": "remark",
                    "mRender": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
                        return data;
                    }
                }, {
					"aTargets": [17],
					"mData": "id",
					"mRender": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
						var returnHtml = "";
						if(full.paystatus==false){
							if(full.status==false){
								returnHtml+= "<a title='同步支付宝' style='text-decoration:none' onclick='bill_sync("+data+")' href='javascript:;' class='c-success'>同步支付宝</a><br>";
							}
							returnHtml+= "<a title='账单收款' style='text-decoration:none' onclick='bill_receiv("+data+")' href='javascript:;' class='c-success'>账单收款</a><br>"
									+"<a title='编辑' style='text-decoration:none' onClick='info_edit("+data+");' href='javascript:;' class='c-success'>编辑</a><br>"
									+"<a title='删除' style='text-decoration:none' onclick='info_del(this, "+data+");' href='javascript:;' class='c-success'>删除</a>";
							return returnHtml;
						}else if(full.paystatus==true){
                            var html = "<a title='打印小票' style='text-decoration:none' onClick='print("+data+");' href='javascript:;' class='c-success'>打印小票</a><br/>"
								+ "<a title='填写备注' style='text-decoration:none' onClick='remake_edit("+data+");' href='javascript:;' class='c-success'>填写备注</a><br/>";
                            html += "<shiro:hasAnyRoles name='service'><a title='删除已支付' style='text-decoration:none' onClick=deletePay(this,"+data+"); href='javascript:;' class='c-success'>删除已支付</a></shiro:hasAnyRoles>"
							return html;
						}else{
						    return "";
						}
					}
				}
			],
			language: {
				aria: {
					sortAscending: ": activate to sort column ascending",
					sortDescending: ": activate to sort column descending"
				},
				emptyTable: "没有数据",
				info: "从 _START_ 到 _END_ 共 _TOTAL_ 条",
				infoEmpty: "没有数据",
				infoFiltered: "(0 到 _MAX_ 条)",
				lengthMenu: " _MENU_",
				search: "查询:",
				zeroRecords: "没有数据",
				paginate: {previous: "<", next: ">", last: "最后一页", first: "第一页"}
			}
		})
	}

    function query() {
    	var startTime=$("#startTime").val();
    	var endTime=$("#endTime").val();   	
    	if(startTime!=''&&endTime!=''){
    		if(startTime<endTime){
    			queryList();
    		}else{
    			layer.alert("开始时间不能小于结束时间");
    		}   		
    	}else{
    		queryList();
    	}		
    }

	function info_add(){
		var index = layer.open({
			type: 2,
			title: "新增账单",
			content: "${pageContext.request.contextPath }/rest/billAccount/addBillAccount"
		});
		layer.full(index);
	}

    function info_edit(id){
        var index = layer.open({
            type: 2,
            title: "修改账单",
            content: "${pageContext.request.contextPath }/rest/billAccount/updateBillAccount?id=" + id
        });
        layer.full(index);
    }

    function remake_edit(id){
        var index = layer.open({
            type: 2,
            title: "填写备注",
            content: "${pageContext.request.contextPath }/rest/billAccount/updateRemarke?id=" + id
        });
        layer.full(index);
    }

    function bill_receiv(id){
        var index = layer.open({
            type: 2,
            title: "账单收款",
            content: "${pageContext.request.contextPath }/rest/billAccount/openReceivBillAccount?id=" + id
        });
        layer.full(index);
    }

    function bill_list_del(id) {
        layer.confirm('确认要删除吗？',function(index){
			$("#myform").ajaxSubmit({
				url: "${pageContext.request.contextPath }/rest/billAccount/deleteBillaccount",
				beforeSubmit: function () {
					layer.load();
				},
				success: function(data){
					layer.closeAll('loading');
					if (data.success) {
						window.location.reload();
					}else {
						layer.alert(data.message);
					}
				},
				error: function(XmlHttpRequest, textStatus, errorThrown){
					layer.closeAll('loading');
					layer.alert('error!',{icon:1,time:2000});
				}
			});
        });
    }

    function info_del(obj,id){
        layer.confirm('确认要删除吗？',function(index){
            $.ajax({
                type: 'POST',
                url: '${pageContext.request.contextPath }/rest/billAccount/deleteBillaccount',
                dataType: 'json',
                data:{
                    ids : id
                },
                success: function(data){
                    if (data.success) {
                        $(obj).parents("tr").remove();
                        layer.msg('已删除!',{icon:1,time:1000});
                    }else {
                        layer.alert("删除失败");
                    }
                },
                error:function(data) {
                    layer.alert('error!',{icon:1,time:1000});
                },
            });
        });
    }

    function deletePay(obj,id){
        layer.confirm('确认要删除吗？',function(index){
            $.ajax({
                type: 'POST',
                url: '${pageContext.request.contextPath }/rest/billAccount/deleteBillaccountPay',
                dataType: 'json',
                data:{
                    id : id
                },
                success: function(data){
                    if (data.success) {
                        $(obj).parents("tr").remove();
                        layer.msg('已删除!',{icon:1,time:1000});
                    }else {
                        layer.alert("删除失败");
                    }
                },
                error:function(data) {
                    layer.alert('error!',{icon:1,time:1000});
                },
            });
        });
    }

    function excel_upload() {
        layer_show("导入账单","${pageContext.request.contextPath }/rest/openBillExcel", 800, 500);
    }

    function excel_download() {
        window.location.href="${pageContext.request.contextPath }/rest/downloadRoominfo";
	}

    function bill_sync(id) {
        $.ajax({
            type: 'POST',
            url: '${pageContext.request.contextPath }/rest/alipay/billBatchUploadRequest',
            dataType: 'json',
            data:{
                id : id
            },
            beforeSubmit: function () {
                layer.load();
            },
            success: function(data){
                layer.closeAll('loading');
                if (data.success) {
                    window.location.reload();
                }else {
                    layer.alert(data.message, {icon: 5});
                }
            },
            error:function(data) {
                layer.closeAll('loading');
                layer.msg('error!',{icon:1,time:1000});
            }
        });
    }

    function bill_list_sync() {
        layer.confirm('确认要同步吗？',function(index){
            $.ajax({
                type: 'POST',
                url: '${pageContext.request.contextPath }/rest/alipay/billBatchUploadRequest',
                dataType: 'json',
                success: function(data){
                    if (data.success) {
                        window.location.reload();
                    }else {
                        layer.alert(data.message, {icon: 5});
                    }
                },
                error:function(data) {
                    layer.msg('error!',{icon:1,time:1000});
                },
            });
        });
    }

    function print(id){
        $.ajax({
            type: 'POST',
            url: '${pageContext.request.contextPath }/rest/billAccount/printAccount',
            dataType: 'json',
            data:{
                id : id
            },
            success: function(data){
                if (data.success) {
                    window.location.reload();
                }
            },
            error:function(data) {
                console.log(data.msg);
            },
        });
    }

    //批量收款
    function bill_allreceiv(id){
		$("#myform").ajaxSubmit({
			url: "${pageContext.request.contextPath }/rest/billAccount/billAllreceiv",
			data:{
				ids : id
			},
			/*beforeSubmit: function () {
				layer.load();
			},*/
			success: function(data){
				if (data.success) {
					console.log(data.data);
					var index = layer.open({
						type: 2,
						title: "账单收款",
						content: "${pageContext.request.contextPath }/rest/billAccount/openReceivAllBillAccount?ids=" + data.data.ids+"&fkAmount="+data.data.fkAmount
					});
					layer.full(index);
				}else {
					layer.alert(data.message);
				}
			},
			error: function(XmlHttpRequest, textStatus, errorThrown){
				layer.closeAll('loading');
				layer.alert('error!',{icon:1,time:2000});
			}
		});
	}
    
    function downloadBillAccountList() {    	
        var url = "${pageContext.request.contextPath }/rest/billAccount/downloadBillAccountList";
        $('#myform').attr("action", url).submit();
    }
    
    //选中小区触发事件
	$("#housingId").change(function(){
		var parentId = $("#housingId option:selected").val();
		$.ajax({
		    type:"post",
			url:"${pageContext.request.contextPath}/rest/roominfo/queryBuildingByHousingId",
			data:{
                "parentId":parentId
			},
			success:function(data){
				var html = "<option value=''>所有楼栋</option>";
				$.each(data,function(index,item){
				    html += "<option value="+item.name+">"+item.name+"</option>";
				})
                $("#building").html(html);
			}
		})
	});
    
	//选中楼栋触发事件
	$("#building").change(function(){
		var parentId = $("#housingId option:selected").val();
		var building = $("#building option:selected").val();
		$.ajax({
		    type:"post",
			url:"${pageContext.request.contextPath}/rest/roominfo/queryUnitByBuilding",
			data:{
				"parentId":parentId,
                "building":building
			},
			success:function(data){
				var html = "<option value=''>所有单元</option>";			   
				$.each(data,function(index,item){
				    html += "<option value="+item.name+">"+item.name+"</option>";
				})
                $("#unit").html(html);
			}
		})
	});
	
	//选中房间号触发事件
	$("#unit").change(function(){
		var parentId = $("#housingId option:selected").val();
		var building = $("#building option:selected").val();
		var unit = $("#unit option:selected").val();
		$.ajax({
		    type:"post",
			url:"${pageContext.request.contextPath}/rest/roominfo/queryRoominfoIdByUnit",
			data:{
				"parentId":parentId,
                "building":building,
                "unit":unit
			},
			success:function(data){
				var html = "<option value=''>所有房间号</option>";			   
				$.each(data,function(index,item){
				    html += "<option value="+item.name+">"+item.name+"</option>";
				})
                $("#room").html(html);
			}
		})
	});
</script>

